<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- header -->
	<jsp:include page="../include/header.jsp"></jsp:include>
	<header id="header">	
	<!--/header-middle-->
	<jsp:include page="../include/header_middle.jsp"></jsp:include>		
	<!--header-bottom-->
	<jsp:include page="../include/header_bottom.jsp"></jsp:include>	
	<!--/header-bottom-->	
	</header>	
<!--/header-->


    <script type="text/javascript">

    var resultId ="";
    var resultPassword = "";

    function form_check(){
		if(f.member_id.value == ""){
			alert("아이디를 입력해주세요");
			return false;
		}
		if(resultId == "0"){
			alert("이미 존재하는 아이디입니다.");
			result = "";
			return false;
		}
		if(f.member_password.value == ""){
			alert("비밀번호를 입력해주세요");
			return false;
		}
		if(f.member_passwordconfirm.value == ""){
			alert("비밀번호확인을 입력해주세요");
			return false;
		}
		if(resultPassword == "0"){
			alert("비밀번호가 일치하지 않습니다.");
			result = "";
			return false;
		}
		if(f.member_name.value == ""){
			alert("이름을 입력해주세요");
			return false;
		}
		if(f.member_yyyy.value == "년"||f.member_mm.value=="월"||f.member_dd.value=="일"){
			alert("생일을 입력해주세요");
			return false;
		}
		if(f.member_zipcode1.value == ""||f.member_zipcode2.value == ""){
			alert("우편번호를 입력해주세요");
			return false;
		}
		if(f.member_addr1.value == ""){
			alert("주소를 입력해주세요");
			return false;
		}
		if(f.member_addr2.value == ""){
			alert("상세주소를 입력해주세요");
			return false;
		}
		f.action = 'joinaction';
		f.submit();
	}

    //id체크   
    function check_idJSON(){
    	$.ajax({
    			url:'getajaxmemberbeans',
    			type:'post',
    			async:true,
    			data:{}, //실어보낼 data ex) data:{키값:값}
    			dataType:'JSON',
    			success:function(memberBeansList){
    				$.each(memberBeansList, function (index, memberBeans){
						/*
						   memberBeans(객체).member_id(키값) : 왠지 Beans.java 에서
						   @JsonRootName("MemberBeans"), @JsonProperty("member_no") anotation 먹을듯...
						   여기서는 따로 선언안해서 클래스명, 변수명 그대로 따라가는듯...
						*/
						
						//중복아이디 검색						
						if($('#member_id').val() == memberBeans.member_id){
							$('#member_cid').val('사용중').css('color','red');
							resultId = "0";
							return false;
						}
						else if($('#member_id').val() == ''){
							$('#member_cid').val('*').css('color','red');
							return false;
						}
						else{
							resultId = "";
							$('#member_cid').val('사용가능').css('color','green');
						}
					});
    			}
    	});
    }
    
    //password체크
    function check_password(){
    	//패스워드 일치여부
		if($('#member_passwordconfirm').val() == $('#member_password').val() && $('#member_passwordconfirm').val() != ''){
			$('#member_cpasswordconfirm').val('일치').css('color','green');
			resultPassword = "";
			return false;
		}
		else if($('#member_passwordconfirm').val() == ''){
			$('#member_cpasswordconfirm').val('*').css('color','red');
			return false;
		}
		else{
			resultPassword = "0";
			$('#member_cpasswordconfirm').val('불일치').css('color','red');
			return false;
		}
    }
    
    function zipCodeOpen(){
		window.open('../zipcode/zipcodeform','newwindow','width = 500, height = 300, top=10, left=10, toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no');		
	}
    
    
    /* getJSON 메서드를 사용한것(get_memberlistJSON.jsp 으로 JSON 형태가 어떤건지 공부했던 내용)
    	$.getJSON('getmemberlistJSON', {non:non},//getMemberJSON 으로 넘길 {키값:전달인자}
			function(memberList) { //CallBack함수로써, 응답데이터가 배열인자로 넘어온다 (하나만 넘어오지만 배열로 처리해야 함)
				$.each(memberList, function (index, memberBeans){
					//중복아이디 검색						
					if($('#member_id').val() == memberBeans.member_id){
						$('#member_cid').val('사용중').css('color','red');
						resultId = "0";
						return false;
					}
					else if($('#member_id').val() == ''){
						$('#member_cid').val('*').css('color','red');
						return false;
					}
					else{
						resultId = "";
						$('#member_cid').val('사용가능').css('color','green');
					}
				});
			}
		); */
    
    </script>


	<section id="form" style = "display: block; margin-bottom: 50px; margin-top: 0px; overflow: hidden;"><!--form-->
		<div class="container">
			<div class="row">
				<div class="col-sm-4" style="width:100%; padding-left:33%; padding-right:33%;">
					<div class="signup-form"><!--sign up form-->
						<form name="f" method="post">
							
							<table style="width: 100%;">
								<tr><td style="width:100%; height:50px; padding-bottom:0px; margin-right:0px; padding-right:0px;"><input type="text" value=" 회원가입" style="background-color:#FE980F; color: white; font-size:17pt; font-style:inherit; height:100%;" disabled /></td>
							</table>
							
							<table style="width: 100%;">
								<tr><td style="width:80%; margin-right:0px; padding-right:0px;"><input type="text" name="member_id" id="member_id" placeholder="아이디" oninput="javascript:check_idJSON()"/></td>
									<td style="padding-left:0px; margin-left:0px;"><input type="text" name="member_cid" id="member_cid" style="padding-left:0px; text-align:center; color:red;" value="*" disabled/></td></tr>
							</table>
							
							<table style="width: 100%;">
								<tr><td style="width:80%; margin-right:0px; padding-right:0px;"><input type="password" name="member_password" id="member_password" placeholder="패스워드"/></td>
								<td style="padding-left:0px; margin-left:0px;"><input type="text" name="member_cpassword" id="member_cpassword" style="padding-left:0px; text-align:center; color:red;" value="*" disabled/></td></tr>
							</table>
							
							<table style="width: 100%;">							
								<tr><td style="width:80%; margin-right:0px; padding-right:0px;"><input type="password" name="member_passwordconfirm" id="member_passwordconfirm" placeholder="패스워드 확인" oninput="javascript:check_password()"/></td>
								<td style="padding-left:0px; margin-left:0px;"><input type="text" name="member_cpasswordconfirm" id="member_cpasswordconfirm" style="padding-left:0px; text-align:center; color:red;" value="*" disabled/></td></tr>
							</table>
							
							<table style="width: 100%;">							
								<tr><td style="width:80%; margin-right:0px; padding-right:0px;"><input type="text" name="member_name" id="member_name" placeholder="이름"/></td>
								<td style="padding-left:0px; margin-left:0px;"><input type="text" name="member_cname" id="member_cname" style="padding-left:0px; text-align:center; color:red;" value="*" disabled/></td></tr>
							</table>
		
							<table style="background:#F0F0E9; border: medium none; color: #696763; display: block; font-family: 'Nanum Gothic Coding', sans-serif; font-size: 14px; font-weight: 300; height: 50px; margin-bottom: 10px; outline: medium none; padding-left: 10px; width: 100%;">
								<tr>
									
									<!-- Brith 부분 Core JSTL -->

									<td style="width:27%; padding-top:0px;">									
										<select name="member_yyyy" id="member_yyyy">
												<option value="년">년</option>
												<c:forEach var="i" begin="1950" end="2015">
													<option value="${i}">${i}</option>
												</c:forEach>
										</select>
									</td>
									
									<td style="width:26%; padding-top:0px;">
										<select name="member_mm"  id="member_mm">
												<option value="월">월</option>
												<c:forEach var="i" begin="1" end="12">
													<option value="${i}">${i}</option>
												</c:forEach>	
										</select>
									</td>
									<td style="width:26%; padding-top:0px;">
										<select name="member_dd"  id="member_dd">
												<option value="일">일</option>
												<c:forEach var="i" begin="1" end="31">
													<option value="${i}">${i}</option>
												</c:forEach>	
										</select>
									</td>
									
									<td style="padding-bottom:0px; padding-top:0px; padding-left:0px; margin-left:0px;"><input type="text" name="cname" id="cname" style="padding-left:0px; padding-top:15%; text-align:center; color:red;" value="*" disabled/></td>
								</tr>
							</table>
							
							<!-- readonly="readonly" -->
							<table style="width: 100%;">
								<tr>
									<td><input type="text" name="member_zipcode1"  id="member_zipcode1" value="" style="text-align:center;" onclick="javascript:zipCodeOpen()" readonly></td>
									<td>-</td>
									<td><input type="text" name="member_zipcode2"  id="member_zipcode2" value="" style="text-align:center;" onclick="javascript:zipCodeOpen()" readonly></td>
								</tr>
							</table>
							
							<table style="width: 100%;">							
								<tr><td style="width:80%; margin-right:0px; padding-right:0px;"><input type="text" name="member_addr1" id="member_addr1" placeholder="주소"/></td>
								<td style="padding-left:0px; margin-left:0px;"><input type="text" name="member_caddr1" id="member_caddr1" style="padding-left:0px; text-align:center; color:red;" value="*" disabled/></td></tr>
							</table>
							
							<table style="width: 100%;">							
								<tr><td style="width:80%; margin-right:0px; padding-right:0px;"><input type="text" name="member_addr2" id="member_addr2" placeholder="상세주소"/></td>
								<td style="padding-left:0px; margin-left:0px;"><input type="text" name="member_caddr2" id="member_caddr2" style="padding-left:0px; text-align:center; color:red;" value="*" disabled/></td></tr>
							</table>
							
							<input type="text" name="member_phone" id="member_phone" placeholder="핸드폰번호"/>
							<input type="text" name="member_email" id="member_email" placeholder="이메일"/>
							<input type="text" name="member_nickname" id="member_nickname" placeholder="닉네임"/>
							<textarea name="member_status" id="member_status" style="background:#F0F0E9; border: medium none; color: #696763; display: block; font-family: 'Nanum Gothic Coding', sans-serif; font-size: 14px; font-weight: 300; height: 90px; margin-bottom: 10px; outline: medium none; padding-left: 10px; width: 100%;" placeholder="자기소개"></textarea>
							<button onclick="javascript:form_check()" class="btn btn-default">회원가입</button>
						</form>
					</div><!--/sign up form-->
				</div>
			</div>
		</div>
	</section><!--/form-->
	
	
<!--Footer-->
	<jsp:include page="../include/footer.jsp"></jsp:include>
<!--/Footer-->
